<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        fa{{message}}fa123
    </div>
    <script>


            // 在指定范围渲染数据,初次渲染:根据数据把数据里的内容渲染到视图上;
            var data = {
                message : "我的数据"
            }
            // 在指定范围内查找{{message}}字符;
            var data = {
                message : '我的数据'
            }
            // 在指定范围内查找{{message}}字符;

            var APPEle = document.querySelector('#app');
            var str = APPEle.innerHTML;
            // 通过正则查找{{}}的内容
            // var str = 'fa{{message}}fa123'
            // () 分组 [1-30]集合{1,5}
            // ? + {1,}
            var reg = /\{\{([^{}]+)\}\}/;
            if(reg.test(str)){
                console.log('有大花括号');
                var $1 = RegExp.$1;
                var message = data[$1];

                APPEle.innerHTML = APPEle.innerHTML.replace(reg,message);

                
            }


            // 再次渲染

            // 死循环: get的触发条件是 data['message'],当触发get的时候
            var val = data['message'];
            Object.defineProperty(data,"mesage",{
                get:function(){
                    console.log("get");
                    return val ;
                },
                set : function(){
                    console.log("set");
                    // 监听到数据改变改变之后,获取最新的数据,把旧的数据替换就行了
                    var oldvalue = message;
                    // 通过replace把旧数据替换成 新的修改的值;
                    APPEle.innerHTML = APPEle.innerHTML.replace(oldvalue,newvalue)
                    if(val != newvalue){
                        val = newvalue;
                    }
                },
                configurable:true,
                enumerable:true
            })
            console.log(data);

    </script>
</body>
</html>